<template>
  <div class="container">
    <ul class="all-list"
        v-if="list.length>0">
      <li class="list-item"
          v-for="(item, index) in list"
          :key="index">
        <div class="header">
          {{item.time_msg}}
        </div>
        <ul class="goods-list clearfix">
          <li class="goods-item clearfix"
              v-for="(val, key) in item.list"
              :key="key"
              @tap="goods_detail(val)">
            <div class="logo">
              <img :src="img_url+val.thumb_image"
                   v-if="img_url&&val.thumb_image"
                   alt=""
                   class="img">
            </div>
            <div class="bottom clearfix">
              <div class="price clearfix">
                <span class="icon">￥</span>
                <spam class="num">{{val.price}}</spam>
              </div>
              <div class="action-btn"
                   @tap.stop="open_action(val)">
                <img :src="base_url+'/mp_2.9/action.png'"
                     v-if="base_url"
                     mode="widthFix"
                     alt=""
                     class="img">
              </div>
              <div class="plus"
                   v-if="val.plus_title&&val.plus_title!=''">
                {{val.plus_title}}
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <empty v-else></empty>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
import empty from '@/components/footmark/empty'
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
    }
  },
  methods: {
    goods_detail (item) {
      wx.navigateTo({ url: '/pages/package_mall/goods_detail/main?goods_id=' + item.id });
    },
    open_action (val) {
      this.$emit("show_action", val)
    }
  },
  components: {
    empty
  },
  created () {
    console.log(this.list);
  },
  props: ["list"],
  watch: {
    list (newVal) {

    }
  },
}
</script>

<style lang="less" scoped>
.container {
  .all-list {
    .list-item {
      .header {
        padding: 20px 0 4px 15px;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
      }
      .goods-list {
        margin: 0 6px;
        display: flex;
        flex-wrap: wrap;
        .goods-item {
          margin-top: 6px;
          width: 32.2%;
          margin-right: 6px;
          .logo {
            width: 100%;
            height: 117px;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .bottom {
            width: 100%;
            background-color: #fff;
            position: relative;
            .price {
              width: 100%;
              height: 100%;
              padding-left: 10px;
              .icon {
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(252, 83, 140, 1);
                line-height:28px;
                display: inline-block;
                vertical-align: baseline;
              }
              .num {
                font-size: 16px;
                font-family: "STHeitiTC-Medium";
                font-weight: 500;
                color: rgba(252, 83, 140, 1);
                line-height: 28px;
                display: inline-block;
                vertical-align: baseline;
              }
            }
            .action-btn {
              width: 28px;
              height: 28px;
              position: absolute;
              right: 0;
              top: 0;
              .img {
                width: 20px;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
            .plus {
              padding: 0 5px;
              margin: 3px 0;
              line-height: 16px;
              font-size: 10px;
              font-family: "PingFangSC-Medium", "PingFang SC";
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }

          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>

